<template>
  <view
    :style="'direction:' + $t('dir')"
    :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'"
  >
    <navbar :title="$t(title)" :back="true" />

    <view class="main" v-if="type == 2 || type == 3">
      <view style="padding-bottom: 130rpx; min-height: 1200rpx">
        <view class="d-flex flex-wrap items-center justify-between ma-md">
          <card-grid
            v-for="(item, i) in dataList.data"
            :item="item"
            :key="i"
            @click="toDetail(item)"
          />
        </view>
        <u-empty
          v-if="
            dataList.data &&
            dataList.data.length == 0 &&
            dataList.loadmoreStatus != 'loading'
          "
          mode="list"
          icon="/static/images/empty.png"
          :text="$t('no_content')"
          style="padding-top: 250rpx"
        />
        <u-loadmore
          v-else
          :status="dataList.loadmoreStatus"
          :loading-text="$t('loadingText')"
          loadmore-text="."
          nomoreText="."
          :isDot="true"
          :line="dataList.loadmoreStatus == 'nomore'"
          color="#bfbfbf"
        />
      </view>
    </view>
    <view class="main" v-if="type == 1">
      <view
        class="info-card"
        v-for="(item, index) in dataList.data"
        :key="index"
      >
        <!-- رەسىم قىسمى -->
        <view class="card-image">
          <image :src="item.avatar" mode="aspectFill"></image>
          <view
            class="status-badge"
            :class="item.audit_status === 1 ? 'online' : item.audit_status === 2 ? 'warning' : 'pending' "
          >
            {{
              item.audit_status === 1
                ? $t("dir") == "rtl"
                  ? "تەستىقلاندى"
                  : "已上线"
                : item.audit_status === 2 ? 
                $t("dir") == "rtl"
                ? "قايتۇرۇلدى،تەھرىرلەڭ"
                : "已驳回，编辑重发"
                
             :   $t("dir") == "rtl"
                ? "تەستىقلىنىۋاتىدۇ"
                : "审核中"
            }}
          </view>
        </view>

        <!-- مەزمۇن قىسمى -->
        <view class="card-content" >
          <text class="title">{{ item.title == null ? $t("dir") == "rtl" ? "ئسمى تەھرىرلىنىۋاتىدۇ" : "标题生成中.." : item.title }}</text>
          <view class="info-row">
            <text class="time">{{ item.created_at }}</text>
          </view>
          <view class="address-row">
            <u-icon name="map" size="28" color="#666"></u-icon>
            <text class="address">{{ getposition(item.address) }}</text>
          </view>
        </view>

        <!-- كۇنۇپكىلار قىسمى -->
        <view class="card-actions">
          <view class="action-btn edit" @click="editInfo(item)">
            <u-icon name="edit-pen" size="30" color="#455ef7"></u-icon>
            <text>{{ $t("dir") == "rtl" ? "تەھرىرلەش" : "编辑" }}</text>
          </view>
          <view class="action-btn delete" @click="deleteInfo(item)">
            <u-icon name="trash" size="30" color="#ff4d4f"></u-icon>
            <text>{{ $t("dir") == "rtl" ? "ئۆچۈرۈش" : "删除" }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="custom-modal" v-if="showDeleteModal">
      <view class="modal-content">
        <view class="modal-header">
          <u-icon name="warning-fill" color="#faad14" size="60"></u-icon>
          <text class="modal-title">{{ $t("dir") == "rtl" ? "ئاگاھلاندۇرۇش" : "提示" }}</text>
        </view>
        <view class="modal-body">
          <text>{{ $t("dir") == "rtl" ? "ئۇچۇرىڭىز باش بەتتىنمۇ بىراقلا ئۆچىدۇ ۋە قايتۇرغىلى بولمايدۇ، راستىنلا ئۆچۈرەمسىز؟" : "删除会发布的信息彻底清除，确定要删除吗？" }}</text>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel" @click="showDeleteModal = false">
            {{ $t("dir") == "rtl" ? "قايتىش" : "取消" }}
          </view>
          <view class="modal-btn confirm" @click="confirmDelete">
            {{ $t("dir") == "rtl" ? "ئۆچۈرۈش" : "删除" }}
          </view>
        </view>
      </view>
    </view>
    <view style="height: 180rpx;"></view>
  </view>
</template>
<script>
import config from "@/utils/config";
export default {
  data() {
    return {
      type: 0,
      title: "",
      baseUrl: config.baseUrl,
      dataList: {
        current_page: 1,
        data: [],
        last_page: 1,
        loadmoreStatus: "loadmore",
      },
      showDeleteModal: false,
      deleteItem: null,
    };
  },
  onLoad(options) {
    console.log("onloadsave", options.id);
    var type = options.id;
    this.type = type;
    if (type == 1) {
      this.title = "wodefasong";
      this._indexPage(this.type);
    } else if (type == 2) {
      this.title = "wodeguankan";
      this._indexPage(this.type);
    } else if (type == 3) {
      this.title = "wodeshoucang";
      this._indexPage(this.type);
    } else {
    }
  },
  onShow() {},
  onPullDownRefresh() {
    this.dataList.current_page = 1;
    this._indexPage(this.type);
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (this.dataList.current_page < this.dataList.last_page) {
      this.dataList.current_page += 1;
      this._indexPage(this.type);
    }
  },
  methods: {
    editInfo(item) {
      console.log("editInfo", item);
      var id=item._id;
      var subid=item._subid;
      var urqrId=item.id;
      uni.navigateTo({
        url: "/pages/uqur/yollax?edit=" + true + "&id=" + id + "&subid=" + subid + "&urqrId=" + urqrId,
      });
    },
    getposition(value) {
      const positionList = [
        { labelCn: "库尔勒市", label: "كورلا شەھىرى", value: 1 },
        { labelCn: "轮台县", label: "بۈگۈر", value: 2 },
        { labelCn: "尉犁", label: "لوپنۇر", value: 3 },
        { labelCn: "若羌县", label: "چاقىلىق", value: 4 },
        { labelCn: "且末县", label: "چەرچەن", value: 5 },
        { labelCn: "焉耆", label: "قاراشەھەر", value: 6 },
        { labelCn: "和静县", label: "خېجىڭ", value: 7 },
        { labelCn: "和硕县", label: "خوشۇت", value: 8 },
        { labelCn: "博湖", label: "باغراش", value: 9 },
      ];
      const position = positionList.find((item) => item.value === value);
      return position ? position.label : "";
    },
    toDetail(item) {
      uni.navigateTo({
        url: "/pages/info/show?id=" + item.id,
      });
    },
    async _indexPage(e) {
      console.log("_indexPage", e);

      this.dataList.loadmoreStatus = "loading";
      let page = this.dataList.current_page;
      let params = {
        page: page,
        pageSize: 10,
      };
      await this.$uniapi(
        e == 3
          ? "/get_collection_information_list"
          : e == 2
          ? "/get_seen_list"
          : "/get_audit_status_information_list",
        params
      )
        .then((res) => {
          this.dataList.loadmoreStatus = "loadmore";
          if (res.code == 200) {
            let uqur = res.list;

            if (page == 1) {
              this.dataList.data = uqur.data;
              console.log("uqur", uqur.data);
            } else this.dataList.data.push(...uqur.data);
            this.dataList.current_page = uqur.current_page;
            this.dataList.last_page = uqur.last_page;
            if (uqur.current_page == uqur.last_page)
              this.dataList.loadmoreStatus = "nomore";
          }
        })
        .catch((err) => {
          this.dataList.loadmoreStatus = "loadmore";
        });
    },
    deleteInfo(item) {
      this.deleteItem = item;
      this.showDeleteModal = true;
    },
    
    async confirmDelete() {
      if (!this.deleteItem) return;
      
      try {
        const res = await this.$uniapi('/del_info_list', {
          id: this.deleteItem.id,
        },'POST');
        
        if (res.code === 200) {
          this.$u.toast(this.$t("dir") == "rtl" ? "مۇۋەپپەقىيەتلىك ئۆچۈرۈلدى" : "删除成功");
          this.dataList.current_page = 1;
          this._indexPage(this.type);
        } else {
          this.$u.toast(this.$t("dir") == "rtl" ? "ئۆچۈرۈش مەغلۇپ بولدى" : "删除失败");
        }
      } catch (err) {
        this.$u.toast(this.$t("dir") == "rtl" ? "ئۆچۈرۈش مەغلۇپ بولدى" : "删除失败");
      }
      
      this.showDeleteModal = false;
      this.deleteItem = null;
    },
  },
};
</script>

<style lang="scss">
.info-card {
  margin: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;

  .card-image {
    width: 100%;
    height: 360rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .status-badge {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      padding: 8rpx 24rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      color: #fff;

      &.online {
        background: #52c41a;
      }

      &.pending {
        background: #faad14;
      }
      &.warning {
        background: #fa1414;
      }
    }
  }

  .card-content {
    padding: 20rpx;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
      display: block;
    }

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .price {
        font-size: 36rpx;
        color: #ff4d4f;
        font-weight: 600;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }
    }

    .address-row {
      display: flex;
      align-items: center;
      gap: 8rpx;

      .address {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .card-actions {
    display: flex;
    border-top: 2rpx solid rgba(0, 0, 0, 0.05);

    .action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx;
      gap: 8rpx;
      transition: all 0.3s;

      text {
        font-size: 28rpx;
      }

      &.edit {
        color: #455ef7;
        border-right: 2rpx solid rgba(0, 0, 0, 0.05);

        &:active {
          background: rgba(69, 94, 247, 0.05);
        }
      }

      &.delete {
        color: #ff4d4f;

        &:active {
          background: rgba(255, 77, 79, 0.05);
        }
      }
    }
  }
}

.rtl {
  .info-card {
    .card-image {
      .status-badge {
        right: auto;
        left: 20rpx;
      }
    }

    .card-actions {
      .action-btn.edit {
        border-right: none;
        border-left: 2rpx solid rgba(0, 0, 0, 0.05);
      }
    }
  }
}

.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-content {
    width: 580rpx;
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    animation: modalShow 0.3s ease;
  }
  
  .modal-header {
    padding: 40rpx 0 20rpx;
    
    display: flex;
    align-items: center;
    justify-content: center ;
    flex-direction: column;

    .modal-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
      margin-top: 20rpx;
      display: block;
    }
  }
  
  .modal-body {
    padding: 20rpx 40rpx 40rpx;
    text-align: center;
    
    text {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .modal-footer {
    display: flex;
    border-top: 2rpx solid #eee;
    
    .modal-btn {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      
      &.cancel {
        color: #666;
        background: #f5f5f5;
        
        &:active {
          background: #e8e8e8;
        }
      }
      
      &.confirm {
        color: #fff;
        background: #ff4d4f;
        
        &:active {
          background: #ff3333;
        }
      }
    }
  }
}

@keyframes modalShow {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.rtl {
  .modal-footer {
    flex-direction: row-reverse;
  }
}
</style>